import React,{Component} from 'react'

import {TitlebarStyle} from './Style' 
import {
    Route,
    withRouter,
    Switch,
    Redirect
  } from 'react-router-dom'

class Titlebar extends Component{
    static getDerivedStateFromProps(nextProps, prevState) {
        let pathname = nextProps.location.pathname
        return {
          dir: pathname === '/myChildRouter/mytask/publish' ? 'left' : 'right'
        }
      }
    state={
        dir: 'left'
    }
    render(){
        return(
            <TitlebarStyle>
                <ul>
                    <li onClick={()=>this.handleClick('left')} className={this.state.dir === 'left' ? 'active' : ''}>我发布的任务</li>
                    <li onClick={()=>this.handleClick('right')} className={this.state.dir === 'right' ? 'active' : ''}>我的接单任务</li>
                </ul>
            </TitlebarStyle>
        )
    }
    handleClick(dir){
        this.setState({
          dir
        })
        this.props.history.replace(dir === 'left' ? '/myChildRouter/mytask/publish' : '/myChildRouter/mytask/receipt')
    }
}

export default withRouter(Titlebar)